import React, { PureComponent } from 'react'
import { getCurrentCity } from '../../utils'
import { Toast,Flex,WingBlank } from 'antd-mobile'
import './index.less'

export default class News extends PureComponent {
  state = {
    news: [],
  }

  componentDidMount() {
    this.getNews();
  }

  // 发送请求获取最新资讯数据
  async getNews() {
    try {
      // 开启loading
      Toast.loading('加载中...', 0, null, false);
      const curCity = await getCurrentCity();
      this.$axios("get", "/home/news", { area: curCity.value }).then(res => {
        // console.log('res: ', res);
        Toast.hide();
        this.setState({
          news: res.body
        })
      });
    } catch (error) {
      Toast.hide();
    }
  }

  openToast = (item) => {
    Toast.info('功能未开放', 1, null, false);
  }

  // 渲染最新资讯
  renderNews() {
    return this.state.news.map(item => (
      <div className="news-item" key={item.id} onClick={this.openToast}>
        <div className="imgwrap">
          <img
            className="img"
            src={`${this.baseUrl}${item.imgSrc}`}
            alt=""
          />
        </div>
        <Flex className="content" direction="column" justify="between">
          <h3 className="title">{item.title}</h3>
          <Flex className="info" justify="between">
            <span>{item.from}</span>
            <span>{item.date}</span>
          </Flex>
        </Flex>
      </div>
    ))
  }

  render() {
    return (
      <WingBlank size="md">
        <div className="news">
          {this.renderNews()}
        </div>
      </WingBlank>
    )
  }
}
